<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

{% if component_url == "" %}
<body>
    <div id="{{ gwalker.id }}" class="gwalker-container">
        <h3>
            Loading Graphic-Walker UI...
        </h3>
        <p>If the loading process consistently fails to complete, install/upgarde the ipywidgets package using</p>
        <code>pip install --upgrade ipywidgets</code>

    </div>
    <script>
        var gw_script = "{{ gwalker.gw_script }}";
        var gw_id = "{{ gwalker.id }}";
        var props_data = "{{ gwalker.props }}";
        async function runGwScript() {
            const script_stream = await fetch('data:application/octet-stream;base64,' + gw_script).then((res) => res.body.pipeThrough(new DecompressionStream('deflate')));
            const script = await new Response(script_stream).text();
            eval(script);
            const props_stream = await fetch('data:application/octet-stream;base64,' + props_data).then((res) => res.body.pipeThrough(new DecompressionStream('deflate')));
            const props = await new Response(props_stream).json();
            try{
                window.__GW_VERSION=props.version;
                {{ gwalker.component_script }};
            } catch(e) {
                console.error(e);
            }
        }
        runGwScript();
    </script>
</body>
{% endif %}

{% if component_url != "" %}
<body>
    <script>   
        window.onload = async function() {
            const props_data = "{{ gwalker.props }}";
            const props_stream = await fetch('data:application/octet-stream;base64,' + props_data).then((res) => res.body.pipeThrough(new DecompressionStream('deflate')));
            const props = await new Response(props_stream).json();
            const iframe = window.parent.document.getElementById("gwalker-" + props.id);   
            iframe.onload = function() {
                iframe.contentWindow.postMessage({data: props, type: "pyg_props"}, "*");
            };
        };
    </script>
</body>
{% endif %}

</html>
